<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">汽车保养</view>
				<view class="nav-right">
					<view class="nav-icon-dot"></view>
					<view class="nav-icon-line"></view>
					<view class="nav-icon-circle"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 门店横幅图片 -->
			<view class="store-banner">
				<image class="banner-image" :src="storeInfo.bannerImage" mode="aspectFill"></image>
				<view class="banner-overlay">
					<view class="banner-title">{{ storeInfo.bannerTitle }}</view>
					<view class="banner-subtitle">{{ storeInfo.bannerSubtitle }}</view>
				</view>
			</view>

			<!-- 门店基本信息 -->
			<view class="store-info-section">
				<view class="store-name">{{ storeInfo.name }}</view>
				<view class="store-rating-row">
					<view class="store-rating">
						<view class="stars">
							<image v-for="(star, index) in 5" :key="index" 
								:src="index < storeInfo.rating ? '/static/image/carmaintenance/五星 拷贝@3x.png' : '/static/image/carmaintenance/五星 拷贝.png'"
								class="star-icon"></image>
						</view>
						<text class="rating-text">{{ storeInfo.rating }}分</text>
					</view>
					<text class="store-sales">销量: {{ storeInfo.sales }}</text>
				</view>
				<view class="store-info-row">
					<text class="info-label">营业时间:</text>
					<text class="info-value">{{ storeInfo.businessTime }}</text>
				</view>
				<view class="store-info-row">
					<text class="info-label">位置:</text>
					<text class="info-value">{{ storeInfo.address }}</text>
					<image class="nav-icon" src="/static/image/carmaintenance/plane@3x.png" mode="aspectFit" @click="navigate"></image>
				</view>
			</view>

			<!-- 服务项目 -->
			<view class="service-section">
				<view class="section-title">服务项目</view>
				<view class="service-list">
					<view class="service-item" v-for="(service, index) in serviceList" :key="index" 
						:class="{ 'selected': selectedServices.includes(index) }" @click="toggleService(index)">
						<view class="service-radio">
							<view class="radio-circle" :class="{ 'checked': selectedServices.includes(index) }"></view>
						</view>
						<view class="service-content">
							<view class="service-header">
								<text class="service-name">{{ service.name }}</text>
								<view class="service-price">
									<text class="current-price">¥{{ service.currentPrice }}</text>
									<text class="original-price">¥{{ service.originalPrice }}</text>
								</view>
							</view>
							<text class="service-description">{{ service.description }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 服务评价 -->
			<view class="review-section">
				<view class="section-title">服务评价</view>
				<view class="review-list">
					<view class="review-item" v-for="(review, index) in reviewList" :key="index">
						<image class="review-avatar" :src="review.avatar" mode="aspectFill"></image>
						<view class="review-content">
							<view class="review-header">
								<text class="reviewer-name">{{ review.name }}</text>
								<text class="review-date">{{ review.date }}</text>
							</view>
							<view class="review-stars">
								<image v-for="(star, idx) in 5" :key="idx" 
									src="/static/image/carmaintenance/五星 拷贝@3x.png"
									class="star-icon-small"></image>
							</view>
							<text class="review-text">{{ review.text }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部固定栏 -->
		<view class="bottom-bar">
			<view class="cart-btn" @click="goToCart">
				购物车 ({{ cartCount }})
			</view>
			<view class="confirm-btn" @click="confirmServices">
				确认已选服务
			</view>
		</view>

		<!-- 购物车弹窗 -->
		<view class="cart-modal" v-if="showCartModal" @click="closeCartModal">
			<view class="cart-modal-content" @click.stop>
				<!-- 标题栏 -->
				<view class="cart-modal-header">
					<text class="cart-modal-title">服务订单</text>
					<image class="cart-close-icon" src="/static/image/carmaintenance/错@3x.png" mode="aspectFit" @click="closeCartModal"></image>
				</view>

				<!-- 服务列表 -->
				<scroll-view class="cart-service-list" scroll-y>
					<view class="cart-service-item" v-for="(service, index) in serviceList" :key="index">
						<view class="cart-service-checkbox" @click="toggleServiceInCart(index)">
							<image v-if="selectedServices.includes(index)" 
								src="/static/image/carmaintenance/组 9@3x.png" 
								class="checkbox-icon" mode="aspectFit"></image>
							<view v-else class="checkbox-empty"></view>
						</view>
						<text class="cart-service-name">{{ service.name }}</text>
						<text class="cart-service-price">¥{{ service.currentPrice }}</text>
					</view>
				</scroll-view>

				<!-- 底部操作栏 -->
				<view class="cart-modal-footer">
					<view class="cart-total">
						<text class="total-label">合计:</text>
						<text class="total-price">¥{{ totalPrice }}</text>
					</view>
					<view class="cart-confirm-btn" @click="confirmServicesFromCart">
						确认已选服务
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	// 门店信息
	const storeInfo = ref({
		name: '大美汽车保养厂(解放路店)',
		rating: 4,
		sales: 556,
		businessTime: '周一至周五 早上8:00-晚上22:00',
		address: '山阳区人民路与解放路交叉口',
		bannerImage: '/static/image/图层 1@2x.png',
		bannerTitle: '泰山汽车服务站',
		bannerSubtitle: 'FLYSAK'
	});

	// 地图中心点（门店位置）
	const mapCenter = ref({
		latitude: 35.2236,
		longitude: 113.2925
	});

	// 选中的服务索引
	const selectedServices = ref([1, 2]);

	// 购物车数量
	const cartCount = ref(0);

	// 控制购物车弹窗显示
	const showCartModal = ref(false);

	// 服务项目列表
	const serviceList = ref([{
			name: '小保养套餐 (合成机油+机滤)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		},
		{
			name: '小保养套餐2 (合成机油+机滤)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		},
		{
			name: '小保养套餐3 (合成机油)',
			currentPrice: '35.9',
			originalPrice: '60',
			description: '这里是精洗服务的详细介绍,这里是精洗服务的详细介绍,这里是精洗服务的详细介绍'
		}
	]);

	// 评价列表
	const reviewList = ref([{
			name: '黄**',
			date: '2022-12-31',
			avatar: '/static/image/ren.png',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
		},
		{
			name: '黄**',
			date: '2022-12-31',
			avatar: '/static/image/ren.png',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
		},
		{
			name: '黄**',
			date: '2022-12-31',
			avatar: '/static/image/ren.png',
			text: '洗的非常干净,几个小伙子很用心,态度也很好,强烈推荐来这家店洗车!!!'
		}
	]);

	// 页面加载
	onLoad((options) => {
		// 可以从路由参数获取门店信息
		if (options.name) {
			storeInfo.value.name = decodeURIComponent(options.name);
		}
		if (options.address) {
			storeInfo.value.address = decodeURIComponent(options.address);
		}
		if (options.businessTime) {
			storeInfo.value.businessTime = decodeURIComponent(options.businessTime);
		}
		if (options.rating) {
			storeInfo.value.rating = parseInt(options.rating);
		}
		if (options.sales) {
			storeInfo.value.sales = parseInt(options.sales);
		}
		// 初始化购物车数量
		cartCount.value = selectedServices.value.length;
	});

	// 计算总价
	const totalPrice = computed(() => {
		return selectedServices.value.reduce((total, index) => {
			return total + parseFloat(serviceList.value[index].currentPrice);
		}, 0).toFixed(2);
	});

	// 切换服务选择
	const toggleService = (index) => {
		const idx = selectedServices.value.indexOf(index);
		if (idx > -1) {
			selectedServices.value.splice(idx, 1);
		} else {
			selectedServices.value.push(index);
		}
		// 更新购物车数量
		cartCount.value = selectedServices.value.length;
	};

	// 在购物车弹窗中切换服务选择
	const toggleServiceInCart = (index) => {
		toggleService(index);
	};

	// 导航
	const navigate = () => {
		uni.navigateTo({
			url: `/pages/index/carMaintenance/navigation?name=${encodeURIComponent(storeInfo.value.name)}&address=${encodeURIComponent(storeInfo.value.address)}&latitude=${mapCenter.value.latitude}&longitude=${mapCenter.value.longitude}`
		});
	};

	// 去购物车 - 显示弹窗
	const goToCart = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '购物车为空',
				icon: 'none'
			});
			return;
		}
		showCartModal.value = true;
	};

	// 关闭购物车弹窗
	const closeCartModal = () => {
		showCartModal.value = false;
	};

	// 从购物车弹窗确认服务
	const confirmServicesFromCart = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '请选择服务项目',
				icon: 'none'
			});
			return;
		}
		closeCartModal();
		goToConfirmOrder();
	};

	// 确认已选服务
	const confirmServices = () => {
		if (selectedServices.value.length === 0) {
			uni.showToast({
				title: '请选择服务项目',
				icon: 'none'
			});
			return;
		}
		goToConfirmOrder();
	};

	// 跳转到确认订单页面
	const goToConfirmOrder = () => {
		// 获取选中的服务列表
		const selectedServiceList = selectedServices.value.map(index => ({
			name: serviceList.value[index].name,
			currentPrice: serviceList.value[index].currentPrice,
			originalPrice: serviceList.value[index].originalPrice
		}));

		uni.navigateTo({
			url: `/pages/index/carMaintenance/ConOrder/ConOrder?storeName=${encodeURIComponent(storeInfo.value.name)}&storeAddress=${encodeURIComponent(storeInfo.value.address)}&services=${encodeURIComponent(JSON.stringify(selectedServiceList))}`
		});
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		flex-shrink: 0;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 24rpx;
		background: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
	}

	.nav-icon-circle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		height: 0;
	}

	/* 门店横幅 */
	.store-banner {
		width: 100%;
		height: 400rpx;
		position: relative;
		overflow: hidden;
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.banner-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
		padding: 40rpx 30rpx 30rpx;
	}

	.banner-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.banner-subtitle {
		font-size: 28rpx;
		color: #fff;
		opacity: 0.9;
	}

	/* 门店信息区域 */
	.store-info-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.store-name {
		font-size: 40rpx;
		font-weight: 700;
		color: #000;
		margin-bottom: 20rpx;
	}

	.store-rating-row {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}

	.store-rating {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.stars {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.star-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.rating-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.store-sales {
		font-size: 28rpx;
		color: #666;
	}

	.store-info-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.store-info-row:last-child {
		margin-bottom: 0;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		margin-right: 10rpx;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.nav-icon {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		margin-left: 10rpx;
	}

	/* 服务项目 */
	.service-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		margin-bottom: 30rpx;
	}

	.service-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.service-item {
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		padding: 20rpx;
		border: 2rpx solid #e0e0e0;
		border-radius: 12rpx;
		transition: all 0.3s;
	}

	.service-item.selected {
		border-color: #2477F4;
		background: #f0f7ff;
	}

	.service-radio {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 4rpx;
	}

	.radio-circle {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		position: relative;
		transition: all 0.3s;
	}

	.radio-circle.checked {
		border-color: #2477F4;
		background: #2477F4;
	}

	.radio-circle.checked::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 16rpx;
		height: 16rpx;
		background: #fff;
		border-radius: 50%;
	}

	.service-content {
		flex: 1;
		min-width: 0;
	}

	.service-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 12rpx;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.service-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #000;
		flex: 1;
		min-width: 0;
	}

	.service-price {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex-shrink: 0;
	}

	.current-price {
		font-size: 32rpx;
		font-weight: 600;
		color: #FF6B35;
	}

	.original-price {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.service-description {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* 服务评价 */
	.review-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 120rpx;
	}

	.review-list {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.review-item {
		display: flex;
		gap: 20rpx;
	}

	.review-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.review-content {
		flex: 1;
		min-width: 0;
	}

	.review-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.reviewer-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #000;
	}

	.review-date {
		font-size: 24rpx;
		color: #999;
	}

	.review-stars {
		display: flex;
		align-items: center;
		gap: 4rpx;
		margin-bottom: 12rpx;
	}

	.star-icon-small {
		width: 24rpx;
		height: 24rpx;
	}

	.review-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	/* 底部固定栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		gap: 20rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.cart-btn {
		flex: 1;
		height: 88rpx;
		background: linear-gradient(135deg, #2477F4 0%, #166BEC 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
	}

	.confirm-btn {
		flex: 1;
		height: 88rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	/* 购物车弹窗 */
	.cart-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.cart-modal-content {
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	/* 标题栏 */
	.cart-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.cart-modal-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
	}

	.cart-close-icon {
		width: 40rpx;
		height: 40rpx;
	}

	/* 服务列表 */
	.cart-service-list {
		flex: 1;
		max-height: 50vh;
		padding: 0 30rpx;
	}

	.cart-service-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.cart-service-item:last-child {
		border-bottom: none;
	}

	.cart-service-checkbox {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.checkbox-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.checkbox-empty {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		background: #fff;
	}

	.cart-service-name {
		flex: 1;
		font-size: 30rpx;
		color: #000;
		margin-right: 20rpx;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cart-service-price {
		font-size: 30rpx;
		color: #000;
		font-weight: 500;
		flex-shrink: 0;
	}

	/* 底部操作栏 */
	.cart-modal-footer {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		gap: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.cart-total {
		flex: 1;
		height: 88rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.total-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.9);
	}

	.total-price {
		font-size: 36rpx;
		font-weight: 700;
		color: #fff;
	}

	.cart-confirm-btn {
		flex: 1;
		height: 88rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FF4500 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}
</style>
